﻿
@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/d3.min.3.4.8.js"></script>

<style>
    .node {
        cursor: pointer;
    }

        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

        .node text {
            font: 15px sans-serif;
        }

    .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
    }

    .tree {
        width: 1400px;
        height: 800px;
        margin: 0 auto;
        background: #E0E0E0;
    }

        .tree svg {
            width: 100%;
            height: 100%;
        }


    .chartTooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        box-sizing: border-box;
        background-color: white;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    }

        .chartTooltip.hidden {
            display: none;
        }

        .chartTooltip p {
            margin: 0;
            font-size: 14px;
            line-height: 20px;
            word-wrap: break-word;
        }
</style>

<div class="box-nav clearfix" style="display:none;">
    <div class="col-sm-12">

        <button type="button" class="btn btn-primary" onclick="Select();" title="查询"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</button>
        <a class="btn btn-default" onclick="javascript: window.location.reload();" title="刷新"><span class="glyphicon glyphicon-refresh"></span></a>
    </div>
</div>

<div class="chartTooltip hidden">
    <p>
        <strong class="nameInfo"></strong>
    </p>
</div>

<div class="tree" id="tree"></div>

<div class="box-nav clearfix" id="addNew" style="display:none;">
    <div class="col-sm-12">
        <button type="button" class="btn btn-primary" onclick="addNew();" title="添加第一位太祖"><i class="fa fa-search"></i>&nbsp;&nbsp;添加第一位太祖</button>
        
    </div>
</div>

<script type="text/javascript">
    var edit='@ViewBag.IsEdit';
    var fid='@ViewBag.FID';
    var nbsp4='&nbsp;&nbsp;&nbsp;&nbsp;';
    var nbsp8='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
     var json;
    $(document).ready(function () {
        var url='@Url.Action("GetJsonData", "FamilyInfo")'+'?fid='+fid;
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    json = data;
                    if (json.length == 0) {
                        $('#addNew').css('display', 'block');
                    } else {
                        root = json[0];
                        root.x0 = height / 2;
                        root.y0 = 0;

                        // 折叠根节点的每个孩子
                        root.children.forEach(collapse);

                        // 折叠之后要重绘
                        update(root);
                    }
                },
                error: function (error) {
                    console.log('Error:', error);
                }
            });
    });

    function addNew() {
        window.location.href = 'item?type=a&mid=0&fid=' + fid;
    }

    var margin = [20, 120, 20, 120],
        width = document.getElementById("tree").offsetWidth,
        height = document.getElementById("tree").offsetHeight;

    var i = 0,
        duration = 750,
        root;

    var tree = d3.layout.tree()
        .size([height, width]);

    var diagonal = d3.svg.diagonal()
        .projection(function (d) { return [d.y, d.x]; });

    var zoom = d3.behavior.zoom().scaleExtent([0.1, 100]).on("zoom", zoomed);//添加放大缩小事件

    var svg = d3.select("body").select("#tree").append("svg")
        .call(zoom)//给svg绑定zoom事件
        .append("g")
        .call(zoom)//给g绑定zoom事件
        .append("g")
        .attr("transform", "translate(" + margin[3] + "," + margin[0] + ")");

    zoom.translate([150, 0]);

    //(1) 折叠函数，递归调用,有子孙的就把children（显示）给_children（不显示）暂存，便于折叠，
    function collapse(d) {
        if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
        }
    }

    function zoomed() {
        svg.attr("transform",
            "translate(" + d3.event.translate + ")" +
            "scale(" + d3.event.scale + ")"
        );
    }

    function update(source) {
        // (2-1) 计算新树的布局
        var nodes = tree.nodes(root).reverse(),
            links = tree.links(nodes);

        // (2-2) 树的深度这里树d.y。树的宽度最大720，要分四层，所以每层就乘180
        nodes.forEach(function (d) {
            d.y = d.depth * 180;// 树的x,y倒置了，所以这里Y其实是横向的
            // console.log(d );
        });


        // (2-3) 数据连接，根据id绑定数据
        var node = svg.selectAll("g.node")
            .data(nodes, function (d) {
                return d.id //最初新点开的节点都没有id
                    || (d.id = ++i); //为没有id的节点添加上ID
            });


        var div = d3.select('.chartTooltip').style("opacity", 0)
        var timer = null;

        var nodeEnter = node.enter().append("g")
            .attr("class", "node")
            .style("cursor", "pointer")
            .attr("transform", function (d) {
                return "translate(" + source.y0 + "," + source.x0 + ")"
                // 反方向 节点位置
                // return "translate(" + -source.y0 + "," + source.x0 + ")"
            })
            .on("mouseover", d => {
                if (timer) clearTimeout(timer)
                d3.select('.chartTooltip').transition().duration(300).style('opacity', 1).style('display', 'block')
                // 从d3.event获取鼠标的位置
                var transform = d3.event;
                var yPosition = transform.layerY + 10;
                var xPosition = transform.layerX + 10;
                // 将浮层位置设置为鼠标位置
                var chartTooltip = d3
                    .select(".chartTooltip")
                    .style("left", xPosition + "px")
                    .style("top", yPosition + "px");
                // 更新浮层内容
                //chartTooltip.select(".nameInfo").text("ID:" + d.MemberId + "  排行：" + d.Ranking + " " + d.GenerationName + "字辈 （" + d.RelationName+")");
                var nameInfoHtml = "ID:" + d.MemberId +(d.RelationName != '子' ? nbsp8+d.RelationName : '');
                nameInfoHtml+= "<br/>排行：" + d.Ranking + nbsp8 + d.GenerationName + " 字辈" ;
                if(d.Profile.length > 2){
                    nameInfoHtml+="<br/>"+d.Profile;
                }
                if (edit == "True") {
                    var editHtml = '<a href="item?type=a&mid=' + d.MemberId + '&fid=' + d.FamilyInfoId + '">新增</a>' + nbsp4 + '<a href="item?type=e&mid=' + d.MemberId + '&fid=' + d.FamilyInfoId + '">修改</a>';
                    nameInfoHtml+='<br/>'+editHtml;
                }
                chartTooltip.select(".nameInfo").html(nameInfoHtml);
                // 移除浮层hidden样式，展示浮层
                chartTooltip.classed("hidden", false);
            })
            // 添加mouseover事件
            .on("mouseout", () => {
                // 添加浮层hidden样式，隐藏浮层
                timer = setTimeout(function () {
                    d3.select('.chartTooltip').style('opacity', 0).style('display', 'none')
                    // d3.select('.chartTooltip').style('opacity', 0)
                }, 1100);
            })
            .on("click", function (d) {
                click(d)
            });
        d3.select('.chartTooltip').on('mouseover', function () {
            if (timer) clearTimeout(timer)
            d3.select('.chartTooltip').transition().duration(300).style('opacity', 1).style('display', 'block')
        }).on('mouseout', function () {
            timer = setTimeout(function () {
                d3.select('.chartTooltip').style('opacity', 0).style('display', 'none')
            }, 400);
        })


        // 原点
        nodeEnter.append("circle")
            .attr("r", 1e-6)
            .style("fill", function (d) {
                return d._children ? "#f00" : "#fff";
            });

        //文字 1
        //nodeEnter.append("text")
        //    .attr("x", function (d) {
        //        return d.children || d._children ? 50 : 30;
        //    })
        //    .attr("dy", ".35em")
        //    .attr("text-anchor", function (d) {
        //        return d.children || d._children ? "end" : "start";
        //    })
        //    .text(function (d) {
        //        return d.MemberName //
        //    })
        //    .style("fill-opacity", 1)
        //    .style("font-size", "12px");

        //文字 2
        nodeEnter.append("text")
            .attr("x", function (d) {
                return d.children || d._children ? 20 : 0;
            })
            .attr("y", function (d) {
                return d.children || d._children ? 25 : 20;
            })
            .attr("dy", ".35em")
            .attr("text-anchor", function (d) {
                return d.children || d._children ? "end" : "start";
            })
            .text(function (d) {
                return d.MemberName + " " + d.GenerationNum+"代";
            })
            .style("fill-opacity", 1)
            .style("font-size", "12px");


        // (2-5) 原有节点更新到新位置
        var nodeUpdate = node.transition()
            .duration(duration)
            .attr("transform", function (d) {
                return "translate(" + d.y + "," + d.x + ")";
                // 反方向 节点更新
                // return "translate(" + -d.y + "," + d.x + ")";
            });

        nodeUpdate.select("circle")
            .attr("r", 4.5)
            .attr("r", function (d) {
                return d._children ? "5" : "5";
            })
            .style("fill", function (d) {
                return d._children ? "#f00" : "#f90";
            });
        nodeUpdate.select("text")
            .style("fill-opacity", 1);

        // (2-6) 折叠节点的子节点收缩回来
        var nodeExit = node.exit().transition()
            .duration(duration)
            .attr("transform", function (d) {
                return "translate(" + source.y + "," + source.x + ")";
                // 反方向 节点退出
                // return "translate(" + -source.y + "," + source.x + ")";
            })
            .remove();
        nodeExit.select("circle")
            .attr("r", 1e-6);
        nodeExit.select("text")
            .style("fill-opacity", 1);

        // (2-7) 数据连接，根据目标节点的id绑定数据
        var link = svg.selectAll("path.link")
            .data(links, function (d) {
                return d.target.id;
            });

        // (2-8) 增加新连接
        link.enter().insert("path", "g")
            .attr("class", "link")
            .attr("d", function (d) {
                var o = { x: source.x0, y: source.y0 };
                return diagonal({ source: o, target: o });
            });

        // (2-9) 原有连接更新位置
        link.transition()
            .duration(duration)
            .attr("d", diagonal);

        // (2-10) 折叠的链接，收缩到源节点处
        link.exit().transition()
            .duration(duration)
            .attr("d", function (d) {
                var o = { x: source.x, y: source.y };
                return diagonal({ source: o, target: o });
            })
            .remove();
        // 把旧位置存下来，用以过渡
        nodes.forEach(function (d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });
    }

    // (3) 切换折叠与否
    function click(d) {
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
        update(d);// 重新渲染
        // 点击节点 以当前节点位置居中
        //const a = zoom.scale()
        //svg.attr('transform', 'translate(' + (width / 3 - d.y0 * a) + ', ' + (height / 2 - d.x0 * a) + ') scale(' + a + ')')
        //zoom.translate([(width / 3 - d.y0 * a), (height / 2 - d.x0 * a)]).scale(a)
    }

    //function click(d) {
    //    if (d.children) {
    //        d._children = d.children;
    //        d.children = null;
    //    } else {
    //        d.children = d._children;
    //        d._children = null;
    //    }
    //    update(d);
    //}

</script> 